<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>ref为基本数据类型num：{{ num }}</p>
    <p>ref为引用数据类型obj：{{ obj }}</p>
    <button @click="num++">修改num</button>
    <button @click="obj={
     name:'王五',
     age:16,
     sex:'女',
     hobby:['唱','跳','rap'],
     score:{
       ch:[213,321434,54535,654],
       math:[312,31,43424,242]
     }}"
    >修改obj
    </button>
    <button @click="obj.hobby.push('打篮球')">修改obj内部hobby数组的值</button>
    <button @click="obj.score.ch.push(100)">修改obj内部score对象内部数组的值</button>
    <button @click="obj.age++">修改obj内部age的值</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import {ref, watch} from "vue";

const num = ref<number>(0)
//watch监听1:ref对象,值是一个基本类型
// watch(
//     num,
//     (newVal,oldVal)=>{
//       console.log('最新值',newVal,'修改前的旧值',oldVal)
//     },
//     {
//       immediate:true,     // 立即监听
//     }
//     )
//watch监听1:ref对象,值是一个引用类型

// ts 类型限制

type scoreType = {
  ch: number[],
  math: number[]
}

interface ObjType {
  name: string,
  age: number,
  sex: string,
  hobby: string[],
  score: scoreType
}

//watch监听2:ref对象,值是一个引用类型
const obj = ref<ObjType>({
  name: '李四',
  age: 12,
  sex: '男',
  hobby: ['唱', '跳', 'rap'],
  score: {
    ch: [1, 2, 3, 4],
    math: [2, 3, 4, 5]
  }
})

//2.1直接监听ref对象,则只能监听到当前ref对象中的值被替换,如果想要监听ref对象内代理对象的改变,则需要深度监听
// watch(
//     obj,   // 这里的obj是ref对象   只有 .value 的值（地址）改变了才能监听到
//     (newVal,oldVal)=>{
//       console.log('最新值',newVal,'修改前的旧值',oldVal)
//     },
//     {
//       deep:true,     // 深度监听
//     }
// )

// 2.2监听ref对象的value属性的值,默认开启深度监听
// watch(
//     obj.value,   // 这里的obj.value是proxy对象   只有 .value 内部的值（堆里面的）改变了才能监听到
//     (newVal,oldVal)=>{
//       // 注意 .value的值（地址）改变了监听不到
//       console.log('最新值',newVal,'修改前的旧值',oldVal)
//     }
// )

// 2.3监听ref对象中某一个具体的属性值,值是对象类型:默认开启深度监听
// watch(
//     obj.value.score,
//   () => {
//     console.log("score中发生修改");
//   },
// );

// 2.4监听ref对象中某一个具体的属性值,值是基本类型
// watch(
//   () => obj.value.age,
//   (newVal, oldVal) => {
//     console.log('最新值',newVal,'修改前的旧值',oldVal)
//   }
// );

// 2.5监听多个
watch([num, obj.value], () => {
  console.log("监听多个");
});
</script>